import React,{ useEffect, useRef } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
import * as echarts from 'echarts';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'
import {Card, Col, Row, Statistic } from 'antd';
function DashBoard() {
   // 初始化地图
   let map = null;
   const initMap = () => {
     AMapLoader.load({
       "key": "f579df58dc9a00ea84e51da05f8c24de",              // 申请好的Web端开发者Key，首次调用 load 时必填
       "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       "plugins": ['AMap.PlaceSearch', 'AMap.Geolocation'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
     }).then((AMap) => {
       map = new AMap.Map('map', {
         zoom: 15
       });
       // 标记点
       const marker = new AMap.Marker({
         title: '合肥火车站',
         path: lineArr,          //设置线覆盖物路径
         strokeColor: "#3366FF", //线颜色
         strokeWeight: 5,        //线宽
         strokeStyle: "solid",   //线样式
         position: [117.318685, 31.886795],//位置
         center: [116.397428, 39.90923],//中心点坐标
         viewMode:'3D',//使用3D视图
         policy: AMap.DrivingPolicy.LEAST_TIME,// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
       })

       map.add(marker)
       // 还以通过add方法 添加 折线图 圆圈 多边形等等
       // 定义插件
       var placeSearch = new AMap.PlaceSearch({
         // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
         city: '合肥'
       });
       placeSearch.search('spa', (status, result) => {
         console.log(result);
       })
       // 创建定位插件
       var geolocation = new AMap.Geolocation({
         // 是否使用高精度定位，默认：true
         enableHighAccuracy: true,
         // 设置定位超时时间，默认：无穷大
         timeout: 10000,
         // 定位按钮的停靠位置的偏移量
         offset: [10, 20],
         //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
         zoomToAccuracy: true,
         //  定位按钮的排放位置,  RB表示右下
         position: 'RB'
       })
 
       geolocation.getCurrentPosition(function (status, result) {
         console.log(status);
         console.log(result);
       })
     }).catch(e => {
       console.log('地图初始化失败');
     })
   }
   // 初始化echarts
   const chartRef = useRef();
   let chart = null;
   const initChart = () => {
     chart = echarts.init(chartRef.current);
     // 设置 配置项 setOption
     chart.setOption({
       title: {
         text: 'ECharts 入门示例'
       },
       tooltip: {
         axisPointer: {
           type: 'cross'
         },
         trigger: 'axis',
         formatter: '{a0}{b0}{c0}件<br/> {a1}{b1}{c1}元'
       },
       xAxis: {
         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
       },
       yAxis: {},
       series: [
         {
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
         },
         {
           name: '利润',
           type: 'line',
           smooth: true,
           data: [12, 3, 9, 8, 2, 45]
         }
       ]
     })
   }
   useEffect(() => {
     initMap();
     initChart();
   }, [])
  return (
    <div>
      <Row gutter={10}>
      <Col span={6}>
        <Card bordered={false}>
        <Statistic
            title="数据"
            value={7.3}
            precision={2}
            valueStyle={{
              color: '#3f8600',
            }}
            prefix={<ArrowUpOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
      <Col span={6}>
        <Card bordered={false}>
        <Statistic
            title="销售额"
            value={7.3}
            precision={2}
            valueStyle={{
              color: '#3f8600',
            }}
            prefix={<ArrowDownOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
      <Col span={6}>
        <Card  bordered={false}>
        <Statistic
            title="利润"
            value={7.3}
            precision={2}
            valueStyle={{
              color: '#3f8600',
            }}
            prefix={<ArrowUpOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
      <Col span={6}>
        <Card bordered={false}>
        <Statistic
            title="xxx"
            value={7.3}
            precision={2}
            valueStyle={{
              color: '#3f8600',
            }}
            prefix={<ArrowUpOutlined />}
            suffix="%"
          />
        </Card>
      </Col>
    </Row>
    <Row>
        <Col span={12}>
          <div id='map' style={{ height: 400, marginTop: "20px" }}></div>
        </Col>
        <Col span={12}>
          <div ref={chartRef} style={{ height: 400,marginTop: "20px" }}></div>
        </Col>
      </Row>
    </div>
  )
}
export default DashBoard